import React from 'react';
import { BasicProps } from 'antd/es/layout/layout';
import { Avatar, AvatarProps, Badge, Button, Col, Dropdown, DropDownProps, Layout, Row, Space, theme } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { MenuProps } from 'antd/es/menu/menu';
import { WitMenu, WitMenuProps } from '@/components/Menu';

const { Header } = Layout;

interface avatarProps extends AvatarProps {
  src?: string;
  size?: 'default' | 'small' | 'large';
  userName?: string;
  dropDown?: DropDownProps;
  // render?: (props: AvatarProps, defaultDom: React.ReactNode) => React.ReactNode;
}
export interface HeaderProps {
  // header配置
  headerConfig?: BasicProps;
  /** header菜单配置,使用Ant官方接口文档
   * @see  https://ant-design.antgroup.com/components/menu-cn#menu AntD Manu接口文档
   */
  menu?: WitMenuProps;
  // 是否可收起
  collapsible?: boolean | string | React.ReactNode;
  // 当前收起状态
  collapsed?: boolean;
  // 点击收起方法
  onClick?: () => void;
  /**
   * 头像配置
   * @link https://ant-design.antgroup.com/components/avatar-cn#avatar AntD Avatar接口文档
   */
  avatarProps?: avatarProps;
}
export const WitHeader = (props: HeaderProps) => {
  const { headerConfig, onClick, collapsed, collapsible, menu, avatarProps } = props;
  const { token } = theme.useToken();
  // 收起开关
  const collapsedDom = () => {
    if (!collapsible) {
      return (
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => onClick?.()}
          style={{
            fontSize: '16px',
            width: 64,
            height: 64,
            color: token.colorPrimary,
            position: 'absolute',
          }}
        />
      );
    }
    return collapsible;
  };
  // 菜单节点
  const menuDom = () => {
    if (menu) {
      return (
        <Col flex="auto">
          <WitMenu {...menu} />
        </Col>
      );
    }
    return null;
  };
  const dom = () => (
    <Row justify="space-between">
      <Col flex="64px" style={{ marginRight: 10 }}>
        {collapsedDom()}
      </Col>
      {menuDom()}
      <Col style={{ margin: '0 10px' }}>
        <Space>
          <Space>
            <Badge count={10} overflowCount={9}>
              <Button type="text">消息</Button>
            </Badge>
          </Space>
          <Dropdown {...avatarProps?.dropDown} placement="bottom">
            <Button type="text" style={{ height: '80%' }}>
              <Avatar src={avatarProps?.src} alt={avatarProps?.userName} size={avatarProps?.size} />
              <span style={{ marginLeft: 5, color: token.colorTextDescription }}>{avatarProps?.userName}</span>
            </Button>
          </Dropdown>
        </Space>
      </Col>
    </Row>
  );
  return <Header {...headerConfig}>{dom()}</Header>;
};
